<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX02</title>
</head>
<body>
<h1>The Ajax 03 Page</h1>
<button onclick="doAjaxGet()">Do Ajax Get</button>
<button onclick="doAjaxPost()">Do Ajax Post</button>
<button onclick="doAjaxDelete()">Do Ajax Delete</button>
<button onclick="doAjaxUpdate()">Do Ajax Update</button>
<div id="result"></div>

<script>
    function doAjaxGet() {
        let xhr = new XMLHttpRequest();

        xhr.onreadystatechange=function(){  //事件处理函数（客户端与服务端通讯函数）
            console.log("已进入xhr的function")
            //xhr.readyState==4表示服务端响应到客户端数据已经接受完成
            //xhr.status==200表示请求处理过程没有问题，500是异常
            if(xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerHTML=xhr.responseText;
            }
        }

        xhr.open("Get","http://localhost:8080/doAjaxGet",true)

        xhr.send(null);
    }


    function doAjaxPost() {
        let xhr = new XMLHttpRequest();

        xhr.onreadystatechange=function(){  //事件处理函数（客户端与服务端通讯函数）
            console.log("已进入xhr的function")
            //xhr.readyState==4表示服务端响应到客户端数据已经接受完成
            //xhr.status==200表示请求处理过程没有问题，500是异常
            if(xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerHTML=xhr.responseText;
            }
        }

        xhr.open("POST","http://localhost:8080/doAjaxPost",true)

        //Post请求向服务器传递数据，需要设置请求头，必须写在open后面
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

        //发送请求（）
        xhr.send("id=101&name=Computer&remark=Computer");
    }


    function doAjaxDelete() {
        let xhr = new XMLHttpRequest();

        xhr.onreadystatechange=function(){  //事件处理函数（客户端与服务端通讯函数）
            console.log("已进入xhr的function")
            //xhr.readyState==4表示服务端响应到客户端数据已经接受完成
            //xhr.status==200表示请求处理过程没有问题，500是异常
            if(xhr.readyState==4){
                if (xhr.status==200){
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }

        xhr.open("delete","http://localhost:8080/doAjaxDelete?id=101",true);
        //发送请求（）
        xhr.send("id=101");
    }


    function doAjaxUpdate() {
        let xhr = new XMLHttpRequest();

        xhr.onreadystatechange=function(){
            console.log("已进入xhr的function")
            if(xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerHTML=xhr.responseText;
            }
        }

        xhr.open("put","http://localhost:8080/doAjaxUpdate",true);

        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

        //发送请求（）
        xhr.send("id=101&name=电脑&remark=电脑");
    }
</script>
</body>
</html>